
<template>
    <div class="container">
        <!-- 返回按钮 -->
        <a href="/articles" class="back-button">&larr; 返回文章列表</a>

        <!-- 文章头部 -->
        <header class="article-header">
            <h1 class="article-title">{{ detailInfo.title }}</h1>
            <div class="article-meta">
                <!-- <span>作者: 张开发者</span> -->
                <span>发布日期: {{ detailInfo.createTime }}</span>
                <span>阅读量: {{ detailInfo.viewCount }}</span>
            </div>
            <!-- <img src="https://via.placeholder.com/800x400?text=Vue3" alt="Vue3" class="article-image"> -->
        </header>

        <!-- 文章内容 -->
        <div class="article-reader">
             <!-- <QuillEditor 
                theme="bubble"
                :content="detailInfo.content"
                contentType="html"
                toolbar="false"
                /> -->
                <div class="ql-container ql-bubble ql-editor" v-html="detailInfo.content">

                </div>
            <div class="article-tags">
                <span v-for="(tag,index) in detailInfo.tagCodes" :key="index" class="tag">{{tag}}</span>
            </div>
        </div>

        <!-- 评论区域 -->
        <section class="comments-section" v-if="isComm">
            <h3 class="section-title">评论 ({{ commentSize }})</h3>
                        <!-- 评论列表 -->
            <div class="comment-list">
                <!-- 评论1 -->
                <div class="comment" v-for="(item,index) in commentList" :key="index">
                    <div class="comment-header">
                        <div class="comment-avatar">{{item.authorName.charAt(0)}}</div>
                        <div class="comment-author">{{item.authorName}}</div>
                        <div class="comment-date">{{item.createTime}}</div>
                    </div>
                    <div class="comment-content">
                        {{item.content}}
                    </div>
                    <div style="padding-left: 30px;" v-for="(item,index) in item.children" :key="index">
                        <div class="comment-header">
                            <div class="comment-avatar" style="background-color: #333;color: #fff;">{{item.authorName.charAt(0)}}</div>
                            <div class="comment-author">{{item.authorName}}</div>
                            <div class="comment-date">{{item.createTime}}</div>
                        </div>
                        <div class="comment-content">
                            {{item.content}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论表单 -->
            <el-form class="comment-form" v-model="commentForm">
                <!-- <div class="form-group">
                    <label for="comment-name" class="form-label">姓名（非必填）</label>
                    <input type="text" id="comment-name" v-model="commentForm.authorName" class="form-input" placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="comment-email" class="form-label">邮箱 (非必填，不会公开)</label>
                    <input type="email" id="comment-email" v-model="commentForm.authorEmail" class="form-input" placeholder="请输入您的邮箱">
                </div> -->
                <div class="form-group">
                    <label for="comment-content" class="form-label">评论内容</label>
                    <textarea id="comment-content" v-model="commentForm.content" class="form-textarea" placeholder="请输入您的评论" required></textarea>
                </div>
                <button @click="submitForm" class="submit-button">提交评论</button>
            </el-form>
        </section>
    </div>
</template>

<script setup name="article">
import { onMounted, ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { getInfo,getComments,addComment,isComments } from "@/api/article"
import { message } from '@/utils/message'
import { useHead } from '@vueuse/head';
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
const route = useRoute();

const id = route.params.id;
const detailInfo = ref({})
const commentList = ref([])
const commentSize = ref(0)
const commentForm = ref({})
const isComm = ref(false)

/** 提交按钮 */
function submitForm() {
  if(commentForm.value.content===undefined){
    message.warning('请输入您的评论', 3000)
    return false;
  }
  commentForm.value.postId = id
  addComment(commentForm.value).then(response => {
        if(response.code===200){
            message.success('感谢评论！内容正在审核中。', 3000)
            commentForm.value = {}
            getCommentList()
        }else{
            message.error('请求异常',3000)
        }
    })
}

const getDetail = () =>{
    getInfo(id).then(response => {
        detailInfo.value = response.data
    })
}

const getCommentList = () => {
    getComments(id).then(response => {
        commentList.value = response.data
        commentSize.value = response.count
    })
}

const getIsComments = () => {
    isComments().then(response => {
        isComm.value = response.msg === '1'
        if(isComm.value){
            getCommentList()
        }
    })
}

const seoData = computed(() => ({
  title: detailInfo.value?.title,
  meta: [
    {
      name: 'description',
      content: detailInfo.value?.excerpt 
    },
    {
      name: 'keywords',
      content: detailInfo.value?.tagCodes?.join(',')
    }
  ]
}))

useHead(seoData)

onMounted(()=>{
    getDetail()
    getIsComments()
})

onBeforeMount(()=>{
    document.body.style.backgroundColor = '#f5f7f9';
})

onBeforeUnmount(()=>{
    document.body.style.backgroundColor = '';
})
</script>

<style scoped>
    .container{
        padding: 5rem 4rem;
        background-color: #fff;
    }
    /* 返回按钮 */
    .back-button {
        display: inline-block;
        margin-bottom: 20px;
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

    .back-button:hover {
        color: var(--secondary-color);
    }

    /* 文章头部 */
    .article-header {
        margin-bottom: 30px;
    }

    .article-title {
        font-size: 2rem;
        margin-bottom: 10px;
        color: var(--dark-color);
        line-height: 1.3;
        text-align: left;
    }

    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        color: var(--light-text);
        font-size: 0.9rem;
    }

    .article-image {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: var(--radius-md);
        margin-bottom: 20px;
    }

    /* 文章内容 */
    .article-content {
        background-color: var(--white);
        padding: 30px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-bottom: 40px;
        text-align: left;
    }

    .article-content p {
        margin-bottom: 20px;
        line-height: 1.8;
        text-indent: 2em;
    }

    .article-content h2 {
        font-size: 1.5rem;
        margin: 30px 0 15px;
        color: var(--dark-color);
    }

    .article-content h3 {
        font-size: 1.3rem;
        margin: 25px 0 12px;
        color: var(--dark-color);
    }

    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        margin: 20px 0;
    }

    .article-content pre {
        background-color: #f8f8f8;
        padding: 15px;
        border-radius: var(--radius-sm);
        overflow-x: auto;
        margin: 20px 0;
        font-family: 'Courier New', Courier, monospace;
    }

    .article-content code {
        background-color: #f8f8f8;
        padding: 2px 5px;
        border-radius: var(--radius-sm);
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9rem;
    }

    /* 文章标签 */
    .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 30px;
    }

    .tag {
        background-color: #333;
        padding: 2px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        color: #fff;
    }

    /* 评论区域 */
    .comments-section {
        background-color: var(--white);
        padding: 30px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        color: var(--dark-color);
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-color);
    }

    /* 评论表单 */
    .comment-form {
        margin-bottom: 30px;
        text-align: left;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .form-input, .form-textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        transition: border-color 0.3s;
    }

    .form-input:focus, .form-textarea:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .form-textarea {
        min-height: 120px;
        resize: vertical;
    }

    .submit-button {
        outline: none;
        background-color: #333;
        color: #fff;
        border: none;
        padding: 12px 25px;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s;
        margin: 0 auto;
        display: block;

    }

    .submit-button:hover {
        background-color: #4CAF50;
        color: #333;
    }

    /* 评论列表 */
    .comment-list {
        text-align: left;
        margin-top: 30px;
    }

    .comment {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .comment:last-child {
        border-bottom: none;
    }

    .comment-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--light-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: var(--dark-color);
        font-weight: bold;
    }

    .comment-author {
        font-weight: 600;
        margin-right: 10px;
    }

    .comment-date {
        color: var(--light-text);
        font-size: 0.8rem;
    }

    .comment-content {
        padding-left: 55px;
        line-height: 1.6;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
    .container{
        padding: 5rem 8px;
        background-color: #fff;
    }
    :deep(.ql-code-block-container),
    :deep(pre) {
        border-radius: 0;
        width: calc(100% + 30px);
    }
    
    /* 确保代码块在移动设备上有水平滚动 */
    :deep(code) {
        white-space: pre;
        display: block;
        overflow-x: auto;
    }
    }

    @media (max-width: 480px) {
        .article-title {
            font-size: 1.5rem;
        }
        
        .article-image {
            height: 200px;
        }
        
        .comment-content {
            padding-left: 0;
            margin-top: 10px;
        }
    }

    @media (min-width: 769px) {
        .container{
            min-width: 800px;
            max-width: 950px;
        }
    }

/* 阅读模式下的整体样式 */
:deep(.ql-editor) {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

:deep(.ql-editor h1) {
  font-size: 2em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

/* 代码块样式修改 */
:deep(.ql-code-block-container) {
    background: #2d2d2d;
    color: rgb(201,209,217);
    font-family: Consolas;
    text-align: left;
    padding: 1em;
    border-radius: 5px;
    counter-reset: line;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    max-width: 96vw;
    overflow-x: auto;
    box-sizing: border-box;
}



:deep(pre) {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
    background: #2d2d2d;
    color: rgb(201,209,217);
    padding: 1em;
    border-radius: 5px;
    margin: 1em 0;
}

:deep(.ql-editor img) {
  display: block;
  max-width: 100% !important; /* 限制最大宽度 */
  height: auto;    /* 保持比例 */
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>